import { Box, SxProps } from "@mui/system"
import { Badge, BadgeProps } from "antd"
import React, { useMemo, useState } from "react"
import MessageList, {
  MessageItem,
  MessageListProps,
} from "./coponents/MessageList"
import { useRequest } from "ahooks"
import { getAllMusic } from "@/services"
import { time } from "console"
import { formatTodo } from "./helper"
import { Popover, PopoverProps } from "antd-mobile"
export interface MessageInfo
  extends Omit<PopoverProps, "content">,
    Pick<MessageListProps, "onItemClick"> {
  //children?: React.ReactElement
  sx?: SxProps
  value?: MessageItem[]
}
const MessageInfo = React.forwardRef(
  ({ children, sx, onItemClick, value, ...otr }: MessageInfo, ref) => {
    const [popOpen, setPopOpen] = useState(false)
    const { data: todoData, loading: todoLoading } = useRequest(() =>
      getAllMusic(),
    )
    const stData = useMemo<MessageItem[]>(() => {
      return todoData?.data
        ?.map((todo: any) => {
          return formatTodo(todo)
        })
        ?.slice(0, 1)
    }, [todoData])

    const badgeCount = useMemo(() => {
      return (todoData as any)?.pager?.dataTotal || 1
    }, [todoData])

    return (
      <>
        <Popover
          visible={popOpen}
          placement="bottom"
          onVisibleChange={(open) => {
            setPopOpen(open)
          }}
          content={
            <MessageList
              loading={todoLoading}
              sx={sx}
              value={stData}
              onItemClick={(record) => {
                setPopOpen(false)
                onItemClick && onItemClick(record)
              }}
              ref={ref}
            ></MessageList>
          }
          {...otr}
        >
          <Badge size="small" count={badgeCount} offset={[-8, 8]}>
            {children}
          </Badge>
        </Popover>
      </>
    )
  },
)

export default MessageInfo
